import React, { memo, useCallback, useEffect, useState } from 'react'
import { HomeWarp } from './style'
import SecondHeader from '@/components/second-header'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import { fetchHomeDataAction } from '@/store/modules/home'
import RoomList from '@/components/room-list'
import SecondFooter from '@/components/second-footer'
import SecondTabs from '@/components/second-tabs'
import Longfor from '@/components/longfor-list'

const Home = memo(() => {
  const [city, setCity] = useState('佛山')
  const [city2, setCity2] = useState('南海千灯湖公园')
  const changeCity = useCallback(item => {
    setCity(item.name)
  }, [])

  const changeCity2 = useCallback(item => {
    setCity2(item.name)
  }, [])
  const { goodData, goodDiscountInfo, hotrecommenddest, longforData, plusData } = useSelector(state => {
    return {
      goodData: state.home.goodPriceInfo,
      goodDiscountInfo: state.home.goodDiscountInfo,
      hotrecommenddest: state.home.hotrecommenddest,
      longforData: state.home.longforData,
      plusData: state.home.plusData
    }
  }, shallowEqual)

  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(fetchHomeDataAction())
  }, [dispatch])

  return (
    <HomeWarp>
      <div className="banner"></div>
      <div className="content">
        <SecondHeader title={goodDiscountInfo.title} subtitle={goodDiscountInfo.subtitle} />
        <SecondTabs list={goodDiscountInfo.dest_address} changeCity={changeCity}></SecondTabs>
        <RoomList list={goodDiscountInfo.dest_list && goodDiscountInfo.dest_list[city]} col={3} />
        <SecondFooter text={`显示更多${city}房源`} color={'#00848A'} />

        <SecondHeader title={hotrecommenddest.title} subtitle={hotrecommenddest.subtitle} />
        <SecondTabs list={hotrecommenddest.dest_address} changeCity={changeCity2}></SecondTabs>
        <RoomList list={hotrecommenddest.dest_list && hotrecommenddest.dest_list[city2]} col={3} />
        <SecondFooter text={`显示更多${city2}房源`} color={'#00848A'} />

        <SecondHeader title={longforData.title} subtitle={longforData.subtitle} />
        <Longfor list={longforData.list}></Longfor>

        {/* 高性价比 */}
        <SecondHeader title={goodData.title} />
        <RoomList list={goodData.list} col={4} />
        <SecondFooter />

        <SecondHeader title={plusData.title} subtitle={plusData.subtitle} />
        <RoomList list={plusData.list && plusData.list} col={5} scorll={true} />
        <SecondFooter text={`显示更多plus房源`} color={'#00848A'} />
      </div>
    </HomeWarp>
  )
})

export default Home
